import { useState } from 'react'
import { Button } from '@/components/emcn'
import { UserAvatar } from '@/components/user-avatar/user-avatar'
import { createLogger } from '@/lib/logs/console/logger'
import type { Invitation, Member, Organization } from '@/lib/workspaces/organization'
import { useCancelInvitation, useOrganizationMembers } from '@/hooks/queries/organization'

const logger = createLogger('TeamMembers')

interface TeamMembersProps {
  organization: Organization
  currentUserEmail: string
  isAdminOrOwner: boolean
  onRemoveMember: (member: Member) => void
}

interface BaseItem {
  id: string
  name: string
  email: string
  avatarInitial: string
  avatarUrl?: string | null
  userId?: string
  usage: string
}

interface MemberItem extends BaseItem {
  type: 'member'
  role: string
  member: Member
}

interface InvitationItem extends BaseItem {
  type: 'invitation'
  invitation: Invitation
}

type TeamMemberItem = MemberItem | InvitationItem

export function TeamMembers({
  organization,
  currentUserEmail,
  isAdminOrOwner,
  onRemoveMember,
}: TeamMembersProps) {
  // Fetch member usage data using React Query
  const { data: memberUsageResponse, isLoading: isLoadingUsage } = useOrganizationMembers(
    organization?.id || ''
  )

  const cancelInvitationMutation = useCancelInvitation()

  // Build usage data map from response
  const memberUsageData: Record<string, number> = {}
  if (memberUsageResponse?.data) {
    memberUsageResponse.data.forEach((member: any) => {
      if (member.currentPeriodCost !== null && member.currentPeriodCost !== undefined) {
        memberUsageData[member.userId] = Number.parseFloat(member.currentPeriodCost.toString())
      }
    })
  }

  // Combine members and pending invitations into a single list
  const teamItems: TeamMemberItem[] = []

  // Add existing members
  if (organization.members) {
    organization.members.forEach((member: Member) => {
      const userId = member.user?.id
      const usageAmount = userId ? (memberUsageData[userId] ?? 0) : 0
      const name = member.user?.name || 'Unknown'

      const memberItem: MemberItem = {
        type: 'member',
        id: member.id,
        name,
        email: member.user?.email || '',
        avatarInitial: name.charAt(0).toUpperCase(),
        avatarUrl: member.user?.image,
        userId: member.user?.id,
        usage: `$${usageAmount.toFixed(2)}`,
        role: member.role,
        member,
      }

      teamItems.push(memberItem)
    })
  }

  // Add pending invitations
  const pendingInvitations = organization.invitations?.filter(
    (invitation) => invitation.status === 'pending'
  )
  if (pendingInvitations) {
    pendingInvitations.forEach((invitation: Invitation) => {
      const emailPrefix = invitation.email.split('@')[0]

      const invitationItem: InvitationItem = {
        type: 'invitation',
        id: invitation.id,
        name: emailPrefix,
        email: invitation.email,
        avatarInitial: emailPrefix.charAt(0).toUpperCase(),
        avatarUrl: null,
        userId: invitation.email, // Use email as fallback for color generation
        usage: '-',
        invitation,
      }

      teamItems.push(invitationItem)
    })
  }

  if (teamItems.length === 0) {
    return <div className='text-center text-[var(--text-muted)] text-sm'>No team members yet.</div>
  }

  // Check if current user can leave (is a member but not owner)
  const currentUserMember = organization.members?.find((m) => m.user?.email === currentUserEmail)
  const canLeaveOrganization =
    currentUserMember && currentUserMember.role !== 'owner' && currentUserMember.user?.id

  // Track which invitations are being cancelled for individual loading states
  const [cancellingInvitations, setCancellingInvitations] = useState<Set<string>>(new Set())

  const handleCancelInvitation = async (invitationId: string) => {
    if (!organization?.id) return

    setCancellingInvitations((prev) => new Set([...prev, invitationId]))
    try {
      await cancelInvitationMutation.mutateAsync({
        invitationId,
        orgId: organization.id,
      })
    } catch (error) {
      logger.error('Failed to cancel invitation', { error })
    } finally {
      setCancellingInvitations((prev) => {
        const next = new Set(prev)
        next.delete(invitationId)
        return next
      })
    }
  }

  return (
    <div className='flex flex-col gap-4'>
      {/* Header - simple like account page */}
      <div>
        <h4 className='font-medium text-[13px]'>Team Members</h4>
      </div>

      {/* Members list - clean like account page */}
      <div className='space-y-4'>
        {teamItems.map((item) => (
          <div key={item.id} className='flex items-center justify-between'>
            {/* Member info */}
            <div className='flex flex-1 items-center gap-3'>
              {/* Avatar */}
              <UserAvatar
                userId={item.userId || item.email}
                userName={item.name}
                avatarUrl={item.avatarUrl}
                size={32}
              />

              {/* Name and email */}
              <div className='min-w-0 flex-1'>
                <div className='flex items-center gap-2'>
                  <span className='truncate font-medium text-sm'>{item.name}</span>
                  {item.type === 'member' && (
                    <span
                      className={`inline-flex h-[1.125rem] items-center rounded-[6px] px-2 py-0 font-medium text-xs ${
                        item.role === 'owner'
                          ? 'gradient-text border-gradient-primary/20 bg-gradient-to-b from-gradient-primary via-gradient-secondary to-gradient-primary'
                          : 'bg-[var(--surface-3)] text-[var(--text-muted)]'
                      } `}
                    >
                      {item.role.charAt(0).toUpperCase() + item.role.slice(1)}
                    </span>
                  )}
                  {item.type === 'invitation' && (
                    <span className='inline-flex h-[1.125rem] items-center rounded-[6px] bg-[var(--surface-3)] px-2 py-0 font-medium text-[var(--text-muted)] text-xs'>
                      Pending
                    </span>
                  )}
                </div>
                <div className='truncate text-[var(--text-muted)] text-xs'>{item.email}</div>
              </div>

              {/* Usage stats - matching subscription layout */}
              {isAdminOrOwner && (
                <div className='hidden items-center text-xs tabular-nums sm:flex'>
                  <div className='text-center'>
                    <div className='text-[var(--text-muted)]'>Usage</div>
                    <div className='font-medium'>
                      {isLoadingUsage && item.type === 'member' ? (
                        <span className='inline-block h-3 w-12 animate-pulse rounded bg-[var(--surface-3)]' />
                      ) : (
                        item.usage
                      )}
                    </div>
                  </div>
                </div>
              )}
            </div>

            {/* Actions */}
            <div className='ml-4 flex gap-1'>
              {/* Admin/Owner can remove other members */}
              {isAdminOrOwner &&
                item.type === 'member' &&
                item.role !== 'owner' &&
                item.email !== currentUserEmail && (
                  <Button
                    variant='ghost'
                    onClick={() => onRemoveMember(item.member)}
                    className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                  >
                    Remove
                  </Button>
                )}

              {/* Admin can cancel invitations */}
              {isAdminOrOwner && item.type === 'invitation' && (
                <Button
                  variant='ghost'
                  onClick={() => handleCancelInvitation(item.invitation.id)}
                  disabled={cancellingInvitations.has(item.invitation.id)}
                  className='h-8 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                >
                  {cancellingInvitations.has(item.invitation.id) ? 'Cancelling...' : 'Cancel'}
                </Button>
              )}
            </div>
          </div>
        ))}
      </div>

      {/* Leave Organization button */}
      {canLeaveOrganization && (
        <div className='mt-4 border-[var(--border-muted)] border-t pt-4'>
          <Button
            variant='default'
            onClick={() => {
              if (!currentUserMember?.user?.id) {
                logger.error('Cannot leave organization: missing user ID', { currentUserMember })
                return
              }
              onRemoveMember(currentUserMember)
            }}
          >
            Leave Organization
          </Button>
        </div>
      )}
    </div>
  )
}
